<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link rel="shortcut icon" href="#" />
  <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/deck/deck.css" />
  <link rel="preload" href="{{pluResPath}}font/tttgbnumber.ttf" as="font">
  <link rel="preload" href="{{pluResPath}}img/other/bg5.png" as="image">
  <link rel="preload" href="{{pluResPath}}img/other/bg4.png" as="image">
  <link rel="preload" href="{{pluResPath}}img/other/bg105.png" as="image">
  <link rel="preload" href="{{pluResPath}}img/abyss/bg.png" as="image">
</head>

<body>
  <div class="container" id="container">
    <div class="head_box">
      <div class="role-name">
        {{nickname}} lv:{{level}}
      </div>
      <div class="id_text">
        UID: {{uid}}
      </div>
      <img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
    </div>
    <div style="height: 11px;"></div>

    <div class="basicInfo">
      <div class="tab_lable">角色牌详情</div>
      <div style="height: 10px;"></div>
      <div class="avatar_covers">
        {{each Data.avatar_cards val}}
        <div class="card-wrapper">
          <div class="overlay">
            <img src="{{pluResPath}}img/deck/边框.png" alt="">
          </div>
          <div class="overlay">
            <div class="rq-container">
              <img src="{{pluResPath}}img/deck/容器.png" alt="">
            </div>
            <div class="hp-container">
              <img src="{{pluResPath}}img/deck/{{val.hp}}.png" alt="">
            </div>
          </div>
          <img src="{{val.image}}" alt="">
        </div>
        {{/each}}
      </div>
    </div>
    <div class="basicInfo">
      <div class="tab_lable">行动牌详情</div>
      <div style="height: 10px;"></div>
      <div class="action_covers">
        {{each Data.action_cards val}}
        <div class="card-wrapper">
          <div class="overlay">
            <span>
              <div class="num_lable">{{val.num}}</div>
            </span>
            <img src="{{pluResPath}}img/deck/边框.png" alt="">
          </div>
          <div class="cost-wrapper">
            {{each val.action_cost vals}}
            <div class="ty-container">
              <img src="{{pluResPath}}img/deck/{{vals.cost_type}}.png" alt="" style="position: absolute; z-index: 1;">
            </div>
            <div class="va-container">
              <img src="{{pluResPath}}img/deck/{{vals.cost_value}}.png" alt="" style="position: absolute; z-index: 2;">
            </div>
            <div style="height: 150px;"></div>
            {{/each}}
          </div>
          <img src="{{val.image}}" alt="">
        </div>
        {{/each}}
      </div>
    </div>

    <div class="logo">Created By {{yzName}}</div>
  </div>
</body>

</html>
